<template>
    <div class="flowcontainer">
        <div class="crumb">
            <span>当前位置：</span>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/comsense' }">出版常识</el-breadcrumb-item>
                <el-breadcrumb-item>常识详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div>
            <div class="left" style="margin-bottom: 30px">
                <div class="top">
                    <p>新书展示</p>
                </div>
                <div class="newbookslist"  @click="toNewBookPage">
                    <BookItem v-for="(item, index) in bookList" :key="index" :bookItem="item"></BookItem>
                </div>
            </div>
            <div class="right" style="margin-bottom: 30px">
                <div class="comsensebox">
                    <div class="consensetitle">
                        <p>{{ comSenseObj.title }}</p>
                        <span>时间：{{ comSenseObj.publishtime }}</span>
                    </div>
                    <!-- <div><img :src="comSenseObj.image"/></div> -->
                    <div>
                        <!-- <div id="senseDetail" class="sensedetail" v-html="baseContent" @click="handleHtml($event)"
                            v-trigger></div> -->
                            <div id="detail" class="sensedetail" v-html="baseContent" style="font: 18px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import BookItem from "@/components/BookItem/BookItem.vue";
export default {
    data() {
        return {
            comSenseObj: [],
            bookList: [],
            //获取新书接口的参数
            Border: "", // 排序，asc／desc
            BorderField: "", // 排序，字段
            Bpage: 1, // 当前页码
            Blimit: 3, // 每页数
        };
    },
    mounted() {
        this.getNewBookInfo();
        // console.log(this.$route.params);
        // debugger
        if (Object.values(this.$route.params).length <= 0) {
            let tmpObj = JSON.parse(sessionStorage.getItem("comsenseDetail"));
            this.comSenseObj = tmpObj;
            // this.$route.params.title = tmpObj.title;
            // this.$route.params.content = tmpObj.content;
            // this.$route.params.publishtime = tmpObj.publishtime;
            // console.log(tmpObj);
        } else {
            this.comSenseObj = this.$route.params;
        }
    },
   updated(){
    // 主要是通过操作DOM和使用Vue生命周期钩子函数实现
    let obj = document.getElementById('detail');
    let imgs = obj.getElementsByTagName('img');

 
    for (let i =0; i < imgs.length; i++) {
        imgs[i].style.width = '95%';
        // imgs[i].style.height = '100%';
        imgs[i].src = this.comSenseObj.image;
        
    }
   },
    computed: {
        title() {
            return this.$route.params.title;
        },
        content() {
            return this.$route.params.content;
        },
        publishtime() {
            return this.$route.params.publishtime;
        },
        baseContent() {
            let Base64 = require("js-base64").Base64; // 引入
            let tmpStr = Base64.decode(this.comSenseObj.content);
            //   console.log('解码：' + tmpStr);
            return tmpStr;
        },
    },
    methods: {
        getNewBookInfo() {
            this.$http
                .get(
                    `/bookManagement/books/page?order=${this.Border}&orderField=${this.BorderField}&page=${this.Bpage}&limit=${this.Blimit}`
                )
                .then((res) => {
                    //   console.log(res.data.data.list);
                    this.bookList = res.data.data.list;
                })
                .catch(() => { });
        },
        handleHtml($event) {
            console.log($event.target)
        },
        toNewBookPage(){
			this.$router.push({
				path:'/newbook'
			});
		}
    },
    components: { BookItem },
};
</script>

<style scoped>
.flowcontainer {
    width: 100%;
    height: 100%;
    /* min-height: 1130px; */
    background: rgb(239, 242, 243);
}

.crumb {
    height: 50px;
    margin: 0 240px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.crumb span {
    color: rgb(3, 3, 3);
    font-family: PingFang SC;
    font-size: 18px;
    letter-spacing: 0px;
}

.flowcontainer>div:nth-child(2) {
    height: 100%;
    /* min-height: 1130px; */
    display: flex;
    flex-direction: row;
    margin: 0 240px;
}

.left {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.left p {
    color: rgb(0, 27, 39);
    font-family: PingFang SC;
    font-size: 22px;
    line-height: 22px;
    letter-spacing: 0px;
    text-align: left;
    margin: 0;
    padding: 0;
}

.left .top {
    flex: 1;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(6, 63, 90);
    font-family: PingFang SC;
    font-size: 30px;
    line-height: 44px;
    letter-spacing: 0px;
    text-align: center;
}

.newbookslist {
    flex: 15;
    background-color: white;
    display: flex;
    flex-direction: column;
    /* overflow: scroll; */
    overflow: auto;
}

.newbookslist::-webkit-scrollbar {
    display: none;
}

.right {
    flex: 3;
    margin-left: 20px;
    background-color: white;
    display: flex;
    flex-direction: column;
    padding: 0 40px;
    overflow: auto;
}

.right::-webkit-scrollbar {
    display: none;
}

.right .senselist {
    text-align: left;
    border-bottom: 1px solid rgb(239, 242, 243);
    margin-top: 40px;
    margin: 0;
    padding: 20px 0;
}

.right a {
    text-decoration: none;
    color: rgb(0, 27, 39);
    font-family: PingFang SC;
    font-size: 20px;

    /* line-height: 22px; */
    letter-spacing: 0px;
    text-align: left;
}

.comsensebox {
    display: flex;
    flex-direction: column;
}

.consensetitle {
    flex: 1;
    /* margin-top: 20px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid rgb(239, 242, 243);
}

.consensetitle p {
    color: rgb(0, 27, 39);
    font-family: PingFang SC;
    font-size: 22px;
    /* line-height: 22px; */
    letter-spacing: 0px;
    text-align: center;
    padding-top: 30px;
}

.consensetitle span {
    display: inline-block;
    color: rgb(0, 27, 39);
    font-family: PingFang SC;
    font-size: 14px;
    /* line-height: 21px; */
    letter-spacing: 0px;
    text-align: center;
    padding: 20px 0;
}

.sensedetail {
    flex: 15;
    margin-top: 20px;
    color: rgb(3, 3, 3);
    font-family: PingFang SC;
    font-size: 18px;
    /* line-height: 31px; */
    letter-spacing: 0px;
    text-align: justify;
    text-indent: 2em;
}

.sensedetail >>> span{
    font-size: 18px;
    color: rgb(0, 27, 39);
}

.sensedetail img {
    width: 100%;
}
</style>

<style>
.el-breadcrumb__inner{
	font-size: 18px !important;
}
.el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover {
    color: #24797d;
}
</style>